<template>
    <div class="content">
        <el-timeline class="timeline">
            <!-- 循环判断索引的奇偶区分开左右 -->
            <el-timeline-item v-for="(activity, index) in processData" :key="index"
                :class="index % 2 === 0 ? 'timeline-left' : 'timeline-right'" :timestamp="activity.year" placement="top">
                <el-card>
                    <h4>{{ activity.context }}</h4>

                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>
<script setup lang="ts">
import type { ProcessModel } from '@/api/international'
import { processApi } from '@/api/international'
const processData = ref<ProcessModel[]>([])
onMounted(() => {
    processApi().then(res => {
        processData.value = res.data ?? []
    })
})


</script>
<style scoped lang='less'>
.content {
    width: calc(100% - 220px);
    // background-color: red;
    height: 100%;
}

/* `el-timeline`的容器`padding` */
.timeline {
    padding: 50px;
}

/* 右侧`el-timeline-item`的样式，将原始时间轴组件整体移动到右半侧 */
.timeline-right {
    left: 50%;
    width: 50%;
}

/* 左侧`el-timeline-item`的样式，同上，仅是为了方便下面的CSS样式修改 */
.timeline-left {
    left: 50%;
    width: 50%;
}

/* 针对左侧内容修改样式，注意这里使用的scss */
.timeline-left :deep(.el-timeline-item__wrapper) {
    right: 100%;
    padding: 0 35px 0 0;
    text-align: right;
    position: relative;
    top: -20px !important;
}

:deep(.el-timeline-item__node) {
    border: 2px solid #ff4949;
    background: transparent;
    position: relative;
}

.timeline-left :deep(.el-timeline-item__node::after) {
    content: "";
    width: 22px;
    height: 2px;
    background-color: #FABCBD;
    position: absolute;
    left: -25px;
    top: 3px;
    bottom: -9px;
}

.timeline-right :deep(.el-timeline-item__node::after) {
    content: "";
    width: 22px;
    height: 2px;
    background-color: #FABCBD;
    position: absolute;
    left: 11px;
    top: 3px;
    bottom: -9px;
}

.timeline-right :deep(.el-timeline-item__wrapper) {
    padding-left: 45px;
    position: relative;
    top: -20px
}

:deep(.el-card) {
    background: transparent;
    border: 0;
}

:deep(.el-timeline-item__timestamp.is-top) {
    font-size: 24px;
    color: #1155A3;
}

// :deep(.el-timeline-item__wrapper::before){
//     content: "";
//     width: 20px;
//     height: 2px;
//     background-color: #ff4949;
//     position: absolute;
//     left: 0;
//     top: 0;
// }
</style>
